<template>
  <div id="sidebar">
    <div id="meta">
      <img src="../assets/logo.png" :alt="config.title">
      <div id="title">{{config.title}}</div>
    </div>
    <nav id="nav">
      <router-link v-for="item in category" :key="item.path" :to="`/category/${item.path}`" class="nav-item"
                   :class="`nav-item-${item.level}`">{{item.name}} ::{{item.count}}
      </router-link>
    </nav>
    <footer id="footer">
      <ul>
        <li>&copy; {{config.author}}</li>
        <li>{{mail}}</li>
        <li><a href="http://www.miitbeian.gov.cn/" v-if="config.icp" target="_blank">{{config.icp}}</a></li>
      </ul>
    </footer>
  </div>
</template>

<script>

function buildTree (data, level) {
  let tree = []
  let count = 0
  level++
  data.forEach(item => {
    if (item.type !== 'dir') {
      count++
      return
    }
    let node = {
      name: item.name,
      path: item.path,
      sha: item.sha,
      url: item.url,
      level,
      count: 0
    }

    tree.push(node)
    let res = buildTree(item.children, level)
    node.count = res.count
    tree = tree.concat(res.tree)
  })
  return {tree, count}
}

export default {
  name: 'SideBar',
  props: ['config', 'data'],
  computed: {
    mail: function () {
      return this.config.mail.replace('@', '#')
    },
    category: function () {
      let {tree} = buildTree(this.data, 0)
      return tree
    }
  }
}
</script>
<style lang="less">
  #sidebar {
    float: left;
    width: 240px;
    height: 100%;
    overflow: auto;
    padding-right: 15px;
    box-sizing: border-box;
    border-right: 1px solid #f5f5f5;

    .btn {
      display: block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid #199141;
      background-color: #0b9e61;
      color: #fefefe;
      border-radius: 50%;
      outline: none;

      &:hover {
        box-shadow: 0 0 0 3px rgba(25, 145, 65, .2);
      }
    }
  }

  #meta {
    margin: 15px 0;
  }

  #nav {
    margin: 20px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    a.nav-item {
      margin: 5px 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-decoration: none;
      display: block;

      text-indent: 3em;

      &-1 {
        text-indent: 0;
      }

      &-2 {
        text-indent: 1em;
      }

      &-3 {
        text-indent: 2em;
      }
    }
  }

  #footer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #666;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        padding: 0;
        font-size: 0.8rem;
        line-height: 20px;
      }
    }
  }
</style>
